<template>
	<div class="role-list">
		<el-table :data="tableData" style="width: 100%" max-height="600" stripe>
			<el-table-column prop="orderBy" label="序号" width="50"></el-table-column>
			<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="dataScope" label="数据权限等级" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span v-if="row.dataScope">
						{{ getDedaScope(row.dataScope) }}
						<span>({{ row.dataScope }})</span>
					</span>
					<p v-else>--</p>
				</template>
			</el-table-column>
			<el-table-column prop="createName" label="创建人" width="140px"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
			<el-table-column label="操作" width="300px">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="warning" size="mini" @click="handleColumnPermission(row)">栏目权限</el-button>
						<el-button type="warning" size="mini" @click="handleMenuPermission(row)">菜单权限</el-button>
						<el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>

		<Pagination
			style="margin-top: 20px"
			v-show="parseInt(pageObj.count) > 0"
			:total="parseInt(pageObj.count)"
			@change="getList"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
		/>
	</div>
</template>
<script>
export default {
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10,
				type: 1,
				king: 1,
				name: ''
			},
			tableData: [],
			pageObj: {}
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshRoleList', (v) => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('refreshRoleList');
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('queryTbRoleList', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
		},
		//菜单权限
		handleMenuPermission(row) {
			this.$bus.$emit('showDialogMenuPermission', row);
		},
		//栏目权限
		handleColumnPermission(row) {
			this.$bus.$emit('showDialogColumnPermission', row);
		},
		//复制角色
		async handleCopy(row) {
			await this.$store.dispatch('copyTbRole', row);
			this.getList();
		},
		//编辑
		handleEdit(row) {
			this.$bus.$emit('showDialogRoleAdd', row);
		},
		//删除确认
		handleDelete(row) {
			this.deleteTips(() => {
				this.delete(row);
			}, '确定要删除吗?');
		},
		//删除
		async delete(row) {
			await this.$store.dispatch('deleteTbRole', row);
			this.getList();
		},
		getDedaScope(type) {
			var name = '';
			if (type == 1) {
				name = '低权-仅自己';
			}
			if (type == 3) {
				name = '中低权-本部门';
			}
			if (type == 5) {
				name = '中权-本部门及以下';
			}
			if (type == 7) {
				name = '中高权-自定义部门';
			}
			if (type == 9) {
				name = '高权-所有';
			}
			return name;
		}
	}
};
</script>
<style scoped lang="scss"></style>
